import { useState, useEffect } from 'react';
import { useIntl } from 'umi';
import {
  Form,
  Input,
  Select,
  Button,
} from 'antd';

const { Option } = Select

import { rolefn } from '@/data/options';

interface PropsType {
  source: any;
  formData: any;
  triggerSubmit: any; // 触发提交的事件
  onFinish: any;
}

const CreateAccountForm = (props: PropsType) => {
  const intl = useIntl();
  const [form] = Form.useForm();

  const roles = rolefn()

  useEffect(() => {
    if (props.formData) {
      form.setFieldsValue(props.formData)
    }
  }, [props.formData])

  useEffect(() => {
    if (props.triggerSubmit === true) {
      form.submit()
    }
  }, [props.triggerSubmit])
  

  return <Form
    form={form}
    layout="vertical"
    onFinish={props.onFinish}
  >
    <Form.Item
      label={intl.formatMessage({ id: 'firstname' })}
      name="name"
      rules={[
        {
          required: true,
          message: intl.formatMessage({
            id: 'enterfirstname',
          }),
        },
      ]}
    >
      <Input placeholder={intl.formatMessage({ id: 'enterfirstname' })} />
    </Form.Item>
    <Form.Item
      label={intl.formatMessage({ id: 'lastname' })}
      name="lastName"
      rules={[
        {
          required: true,
          message: intl.formatMessage({
            id: 'enterlastname',
          }),
        },
      ]}
    >
      <Input placeholder={intl.formatMessage({ id: 'enterlastname' })} />
    </Form.Item>
    <Form.Item
      label={intl.formatMessage({ id: 'email' })}
      name="email"
      rules={[
        {
          required: true,
          message: intl.formatMessage({
            id: 'enteremail',
          }),
        },
        {
          type: 'email',
          message: intl.formatMessage({
            id: 'p_e_v_email',
          }),
        },
      ]}
    >
      <Input placeholder={intl.formatMessage({ id: 'enteremail' })} />
    </Form.Item>
    <Form.Item
      label={intl.formatMessage({ id: 'phonenumber' })}
      name="phone"
    >
      <Input
        placeholder={intl.formatMessage({ id: 'enterphonenumber' })}
      />
    </Form.Item>
    <Form.Item
      label={intl.formatMessage({ id: 'password' })}
      name="password"
      rules={[
        {
          required: true,
          message: intl.formatMessage({
            id: 'pleaseinputyourpassword',
          }),
        },
      ]}
    >
      <Input.Password
        placeholder={intl.formatMessage({ id: 'password' })}
      />
    </Form.Item>
    {/* <Form.Item
      label={intl.formatMessage({ id: 'role' })}
      name="role"
    >
      <Select placeholder={intl.formatMessage({ id: 'p_s_role' })}>
        {roles.map(n => <Option key={n.value} value={n.value}>{n.label}</Option>)}
      </Select>
    </Form.Item> */}
    {/* <Form.Item>
      <Button type="primary" htmlType="submit">
        {intl.formatMessage({ id: 'submit' })}
      </Button>
    </Form.Item> */}
  </Form>
};

export default CreateAccountForm;
